{extend name="$_admin_base_layout" /}

{block name="style"}
<link href="__LIBS__/eleTree/css/icon.css" rel="stylesheet" />
<style>
	.eleTree-title{
		min-width: 1000px;
	}
	.eleTree-text {
		border-bottom: 1px dashed #CDCDCD;
		line-height: 32px;
		height: 32px;
		display: inline-flex;
		width: 900px;
	}
	.builder-table-head {
		margin-left: 5%;
		width: 900px;
	}
	.eleTree-dropdown{
		max-width: 2% !important;
	}
	.eleTree-line-horizontal{
		top: 16px !important;
	}
	.eletree_icon-file_fold, .eletree_icon-file_leaf{
		color: #44b4a6 !important;
		width: 3% !important;
		margin: 0 !important;
	}
	.eleTree-text span{
		min-width: 100px; 
		display: block;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		padding-left: 10px;
		}
	.eleTree-text span.title{color: #44b4a6;}
</style>
{/block}

{block name="content"}
    <div class="row">
        <div class="col-md-12">
            <div class="block">
				<div class="block-header bg-gray-lighter">
					<ul class="block-options">
						<li>
							<button type="button" data-toggle="block-option" data-action="fullscreen_toggle"></button>
						</li>
						<li>
							<button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh"></i></button>
						</li>
					</ul>
					<h3 class="block-title">团队管理</h3>
				</div>

					<div class="builder-table-head" id="builder-table-head" style="margin-right: 17px;">
						<table class="table table-builder table-hover table-bordered table-striped js-table-checkable">
							<colgroup>
							</colgroup>
							<div class="pull-right search-bar">
								<input type="hidden" name="search_field" id="search-field" value="">
								<div class="input-group">
									<div class="input-group">
										<input type="text" class="form-control" value="" data-url="{:url('user/vip/group')}" id="search-input" name="keyword" placeholder="请输入手机号">
										<span class="input-group-btn"><button class="btn btn-default" id="search-submit-btn" type="button">搜索</button></span>
									</div>

								</div>
							</div>
							<thead>
							<tr>
								<th class="column-from  ">团队名称</th>
								<th class="column-out_trade_no  ">团队人数</th>
								<th class="column-create_time  ">ID</th>
								<th class="column-pay_time">电话</th>
								<th class="column-payer  ">店铺</th>
								<th class="column-status  ">等级</th>
								<th class="column-payer  ">销量统计</th>
							</tr>
							</thead>
						</table>
					</div>
				<div class="block-content tab-content" id="eletree"></div>
            </div>
        </div>
    </div>
{/block}

{block name="script"}
<script src="__LIBS__/eleTree/eleTree.js"></script>
<script>
$(document).ready(function(){
	var el = eleTree({
		el: '#eletree',
		showCheckbox: true,
		highlightCurrent: true,
		lazy: true,
		showCheckbox: false,
		showRadio: false,
		indent:32,
		// imgUrl: "__LIBS__/eleTree/images/",
		icon: {
			fold: ".eletree_icon-file_fold",
			leaf: ".eletree_icon-file_leaf",
			checkFull: ".eletree_icon-check_full",
			checkHalf: ".eletree_icon-check_half",
			checkNone: ".eletree_icon-check_none",
			dropdownOff: ".eletree_icon-dropdown_right",
			dropdownOn: ".eletree_icon-dropdown_bottom",
			loading: ".eleTree-animate-rotate.eletree_icon-loading1",
			radioCheck: ".eletree_icon-radio_checked",
			radioCheckNone: ".eletree_icon-radio_checked_none",
		},
		data: {$list|json_encode|raw},
		customText: function(data) {
		        var s = data.label
				s = '<span class="title">'+data.label+'</span><span>（'+data.count+'）</span><span>'+data.id+'</span><span>'+data.mobile+'</span><span>'+data.shop+'</span><span>'+data.group+'</span><span>'+data.pay_price+'</span>'
		        return s
		    }
	})
	var methods = {
	    getChecked: function() {
	        alert(JSON.stringify(el.getChecked()))
	    },
	}
	el.on('lazyload', function(d) {
		var data = d.data;
		var load = d.load;
		var loadData = [];
		$.post("{:url('user/vip/group')}", {pid: data.id}, function(res){
			if (res.code == 1){
				loadData = res.data;
			}
			setTimeout(function() {
				load(loadData)
			}, 100)
		})    
	})
	el.on('click', function(data) {
	    console.log(data)
	})
})
</script>
{/block}
